<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输角色名称" clearable v-model="roleName" @clear="searchRole">
                        <el-button slot="append" icon="el-icon-search" @click.prevent="searchRole"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click.prevent="showAddDialog">添加角色</el-button>
                </el-col>
            </el-row>
            <el-table :data="roleList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="角色名称" prop="roleName"></el-table-column>
                <el-table-column label="角色描述" prop="roleDes"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click.prevent="authorityPer(scope.row)">授权</el-button>
                        <el-button type="primary" size="mini" @click.prevent="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click.prevent="removeRoleById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[3, 6 , 12, 24]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--------------------------------------------------添加角色------------------------------------------------>
        <el-dialog title="添加角色" :visible.sync="addDialogVisible" width="50%"
                   @close="addRoleFormClose"
        >
            <el-form
                    :model="addRoleForm"
                    :rules="addRoleFormRules"
                    ref="addRoleFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="addRoleForm.roleName"></el-input>
                </el-form-item>
              <el-form-item label="角色描述" prop="roleDes">
                <el-input v-model="addRoleForm.roleDes"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click.prevent="addRole">确 定</el-button>
                <el-button @click.prevent="cancelAddRole">取 消</el-button>
            </span>
        </el-dialog>
        <!-------------------------------------------------修改角色-------------------------------------------------->
        <el-dialog
                title="修改角色"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editRoleFormClose"
        >
            <el-form
                    :model="editRoleForm"
                    :rules="editRoleFormRules"
                    ref="editRoleFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="editRoleForm.roleName"></el-input>
                </el-form-item>
              <el-form-item label="角色描述" prop="roleDes">
                <el-input v-model="editRoleForm.roleDes"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click.prevent="editRole">确 定</el-button>
                <el-button @click.prevent="cancelEditRole">取 消</el-button>
            </span>
        </el-dialog>

        <!--------------------------------------------------授权--------------------------------------------------->
        <el-dialog
                title="角色授权"
                :visible.sync="authrityDialogVisible"
                width="50%"
                @close="authrityFormClose"
                :close-on-click-modal="false"
        >
            <el-form
                    :model="authrityRoleForm"
                    :rules="authrityRoleFormRules"
                    ref="authrityRoleFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="authrityRoleForm.roleName" :disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="权限" prop="perCheckedIds">
                    <el-tree
                            :data="permissionList"
                            :props="defaultProps"
                            :show-checkbox="true"
                            ref="permissionTreeRef"
                            node-key="id"
                            :check-strictly="true"
                            :default-expand-all="true"
                            :default-checked-keys="defaultCheckedIds"
                            >
                    </el-tree>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click.prevent="authorityRole">确 定</el-button>
                <el-button @click.prevent="cancelAuthority">取 消</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                authrityDialogVisible:false,
                addDialogVisible: false,
                editDialogVisible: false,
                pageNum: 1,
                pageSize: 3,
                roleName: "",
                roleList: [],
                total: 0,
                addRoleForm: {
                    roleName: "",
                    roleDes:""
                },
                addRoleFormRules:{
                    roleName:[
                        {required:true,message:"角色不能为空",trigger:"blur"}
                    ]
                },
                editRoleForm: {
                    id: -1,
                    roleName: "",
                    roleDes:""
                },
                editRoleFormRules:{
                    roleName:[
                        {required:true,message:"角色不能为空",trigger:"blur"}
                    ]
                },
                //授权的对象
                authrityRoleForm:{
                    id:'',
                    roleName:'',
                    perCheckedIds:[]  //选中的权限
                },
                //授权验证
                authrityRoleFormRules:{

                },
                permissionList:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                defaultCheckedIds:[] //角色中原有的权限  反显
            };
        },
        computed:{
            defaultCheckedIdsComputed(){
                return this.defaultCheckedIds ;
            }
        },
        methods: {
          handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.pageNum = 1;
            this.initRole();
          },
          handleCurrentChange(newPage) {
            this.pageNum = newPage;
            this.initRole();
          },
          //-----------------------------------------授权部分----------------------------------------------
            //打开授权对话框
            authorityPer(row){
                this.authrityDialogVisible = true ;
                this.authrityRoleForm.id = row.id;
                this.authrityRoleForm.roleName = row.roleName;
                //1. 查询所有的权限
                this.defaultCheckedIds = [];
                //2.  查询当前 这个角色拥有的权限
                let url = "/permission/getPermissionId/"+row.id;
                this.$axios.get(url)
                    .then(res=>{
                        if (res.data.code == 200){
                            this.defaultCheckedIds = res.data.data;
                        }else {
                            this.$message({
                                type:'error',
                                message:res.data.msg,
                                duration:1000
                            })
                        }
                    })
            },
            //关闭授权对话框
            authrityFormClose(){
                this.authrityDialogVisible = false ;
                this.$refs.permissionTreeRef.setCheckedKeys([]);//取消树中 被选中的状态
            },
            //取消授权
            cancelAuthority(){
                this.authrityDialogVisible = false ;
                //this.defaultCheckedIds = [];
                this.$refs.permissionTreeRef.setCheckedKeys([]); //取消树中 被选中的状态
            },
            //保存授权
            authorityRole(){
                let url = "/role/authority" ;
                //获取 选中的 节点的id
                let ids = this.$refs.permissionTreeRef.getCheckedKeys();
                if (ids.length < 1){
                    this.$message({
                        type:"error",
                        message:'请至少选中一个权限',
                        duration:1000
                    })
                    return ;
                }
                this.authrityRoleForm.perCheckedIds = ids ;
                this.$axios.put(url,this.authrityRoleForm)
                    .then(res=>{
                        if (res.data.code == 200){
                            this.$message({
                                type:"success",
                                message:res.data.msg,
                                duration:1000
                            })
                            this.authrityDialogVisible = false ;
                            this.initRole();
                        }else {
                            this.$message({
                                type:"error",
                                message:res.data.msg,
                                duration:1000
                            })
                        }
                    })
            },





          //-----------------------------------------删除部分----------------------------------------------
            // 删除角色信息
            removeRoleById(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let url = "/role/del/"+id ;
                    this.$axios.delete(url)
                        .then(res=>{
                            if (res.data.code == 200){
                                this.$message({
                                    type:"success",
                                    message:res.data.msg,
                                    duration:1000
                                })
                                this.initRole();
                            }else {
                                this.$message({
                                    type:"error",
                                    message:res.data.msg,
                                    duration:1000
                                })
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },



          //-----------------------------------------添加部分----------------------------------------------
            //添加角色
            showAddDialog() {
                this.addDialogVisible = true;
            },
            cancelAddRole(){
                this.addDialogVisible = false ;
                this.$refs.addRoleFormRef.resetFields();
            },
            addRole() {
                this.$refs.addRoleFormRef.validate(valid=>{
                    if (!valid){
                        return ;
                    }
                    let url = "/role/add";
                    this.$axios.post(url,this.addRoleForm).then(res=>{
                        console.log(res)
                        if (res.data.code == 200){
                            this.$message({
                                type:"success",
                                message:res.data.msg,
                                duration:1000
                            })
                            this.addDialogVisible = false ;
                            this.$refs.addRoleFormRef.resetFields();
                            this.initRole();
                        }else {
                            this.$message({
                                type:"error",
                                message:res.data.msg,
                                duration:1000
                            })
                        }
                    });
                })
            },
            addRoleFormClose(){
                this.addDialogVisible = false ;
                this.$refs.addRoleFormRef.resetFields();
            },






          //-----------------------------------------编辑部分----------------------------------------------
            //编辑角色
            showEditDialog(row) {
                this.editDialogVisible = true;
                this.editRoleForm.id = row.id;
                this.editRoleForm.roleName = row.roleName;
                this.editRoleForm.roleDes = row.roleDes;
            },
            cancelEditRole(){
                this.editDialogVisible = false;
                // this.$refs.editRoleFormRef.resetFields();
                this.initRole();
            },
            editRoleFormClose() {
                this.editDialogVisible = false;
                this.initRole();
                // this.$refs.editRoleFormRef.resetFields();
            },

            editRole() {
                this.$refs.editRoleFormRef.validate(valid=>{
                    if (!valid){
                        return ;
                    }
                    let url = "/role/modify";
                    this.$axios.put(url,this.editRoleForm).then(res=>{
                        console.log(res);
                        if (res.data.code == 200){
                            this.$message({
                                type:"success",
                                message:res.data.msg,
                                duration:1000
                            })
                            this.editDialogVisible = false ;
                            //this.$refs.editRoleFormRef.resetFields();
                            this.initRole();
                        }else {
                            this.$message({
                                type:"error",
                                message:res.data.msg,
                                duration:1000
                            })
                        }
                    });
                })
            },

            searchRole(){
                this.initRole();
            },




          //-----------------------------------------加载角色部分---------------------------------------------
            initRole(){
                let url = "/role/list";
                this.$axios.get(url,{
                    params:{
                        now:this.pageNum,
                        size:this.pageSize,
                        name:this.name
                    }
                }).then(res=>{
                    if(res.data.code == 200){
                        this.roleList = res.data.data.list ;
                        this.pageSize = res.data.data.pageSize;
                        this.pageNum = res.data.data.pageNum ;
                        this.total = res.data.data.total ;
                    }else {
                        this.$message({
                            type:'error',
                            message:res.data.msg,
                            duration:1000
                        })
                    }
                })
            },



          //---------------------------------------加载菜单部分----------------------------------------------
            //初始化加载菜单  先查询所有菜单
            loadMenus() {
                let url = "/permission/showAllMenu";
                this.$axios.get(url)
                    .then(res=>{
                        if (res.data.code == 200){
                            this.permissionList = res.data.data;
                        }else {
                            this.$message({
                                type:'error',
                                message:res.data.msg,
                                duration:1000
                            })
                        }
                    })
            }
        },



        created() {
            this.initRole();
            this.loadMenus();
        }
    };
</script>
<style lang="less" scoped>
</style>